<template>
    <div class="user-list">
        <el-card shadow="hover">
            <div slot="header" class="flex jusc">
                <div class="head-title">
                    <span>用户列表</span>
                    <span class="table-choose" v-show="multipleSelection.length > 0">已选中{{ multipleSelection.length
                    }}个</span>
                </div>
                <div class="flex">
                    <div class="head-input">
                        <el-input v-model="searchContent" prefix-icon="el-icon-search" placeholder="根据用户名或昵称搜索"
                            @blur="search" @keyup.enter.native="search"></el-input>
                    </div>
                    <div class="head-btn">

                    </div>
                </div>

            </div>
            <div>
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                    v-loading="isLoading" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column prop="username" label="用户名" width="200">
                    </el-table-column>
                    <el-table-column prop="nickname" label="昵称">
                    </el-table-column>
                    <el-table-column prop="gender" label="性别" width="80">
                        <template slot-scope="scope">{{ scope.row.gender == 1 ? "男" : "女" }}</template>
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="200">
                    </el-table-column>
                    <el-table-column label="状态">
                        <template slot-scope="scope">{{ scope.row.status == 1 ? "正常" : "禁用" }}</template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button size="mini" type="primary" @click="showMenu(scope.row)">查看菜单</el-button>
                            <el-button size="mini" type="success" @click="showUserRole(scope.row)">分配权限</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pag">
                <el-pagination background layout="prev, pager, next" :current-page="currPage"
                    @current-change="handleCurrentChange" :page-size="pageSize" :total=total>
                </el-pagination>
            </div>
        </el-card>

        <el-dialog title="查看用户菜单" :visible.sync="showUserAdminMenu" width="35%">
            <el-table :data="userMenuList" style="width: 100%">
                <el-table-column prop="name" label="菜单英文">
                </el-table-column>
                <el-table-column prop="title" label="菜单名称">
                </el-table-column>
                <el-table-column prop="icon" label="图标">
                </el-table-column>
                <el-table-column prop="hidden" label="是否隐藏">
                    <template slot-scope="scope">
                        <span v-show="scope.row.hidden == 0">否</span>
                        <span v-show="scope.row.hidden == 1">是</span>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序">
                </el-table-column>
            </el-table>
        </el-dialog>

        <el-dialog title="分配角色" :visible.sync="showUserRoleDialog" width="30%">
            <el-select v-model="userRoleList" multiple placeholder="请选择">
                <el-option v-for="item, index in allRoleList" :label="item.name" :value="item.id"
                    :index="index">
                </el-option>
            </el-select>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showUserRoleDialog = false">取 消</el-button>
                <el-button type="primary" @click="submitRole" :loading="loading">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'user',
    data() {
        return {
            loading: false,
            showMenuDialog: false,
            pageSize: 10,
            isLoading: false,
            currPage: 1,
            total: 1,
            tableData: [],
            multipleSelection: [],
            opUserInfo: {},
            searchContent: "",
            showUserAdminMenu: false,
            userRoleList: [],
            allRoleList: [],
            showUserRoleDialog: false
        }
    },
    mounted() {
        this.search()
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleCurrentChange(val) {
            this.currPage = val
            this.search()
        },
        handleClose(done) {
            done()
            setTimeout(() => {
                this.editUserItem = {}
            }, 300)
        },
        init() {
            this.search()
        },
        async search() {
            this.isLoading = true
            let res = await this.$store.dispatch("getUserList", {
                pageSize: this.pageSize,
                searchContent: this.searchContent,
                currPage: this.currPage,
            });
            this.isLoading = false
            if (res.success) {
                this.tableData = res.data.list
                this.total = res.data.totalCount
            }
            else this.$global.resError(res)
        },
        async showMenu(data) {
            this.opUserInfo = data
            let res = await this.$store.dispatch('getUserMenu', {
                username: this.opUserInfo.username
            })
            if (!res.success) this.$myfun.resError(res)
            else this.showUserAdminMenu = true
        },
        // 展示分配角色
        async showUserRole(data) {
            this.opUserInfo = data
            let res = await this.$store.dispatch("getUserRoleAndAll", {
                username: this.opUserInfo.username
            })
            if (res.success) {
                this.userRoleList = res.data.userRoleList
                this.allRoleList = res.data.allRoleList
                this.showUserRoleDialog = true
            }
            else this.$myfun.resError(res)
        },
        // 保存分配角色
        async submitRole() {
            this.loading = true
            let data = {
                userRoleList: this.userRoleList,
                userId: this.opUserInfo.id,
                username: this.opUserInfo.username
            }
            let res = await this.$store.dispatch("saveUserRole", data)
            this.loading = false
            if (res.success) {
                this.$message.success(res.message)
                this.showUserRoleDialog = false
            }
            else this.$myfun.resError(res)
        }

    },
    computed: {
        userList() {
            return this.$store.state.user.userList
        },
        userMenuList() {
            return this.$store.state.menu.userMenuList
        },
    },

}
</script>

<style scoped>
.clearfix {
    display: flex;
    align-items: center;
}

.head-btn {
    margin: 0 10px;
}

.user-list {
    background: rgb(248, 248, 248);
}

.pag {
    text-align: center;
    margin-top: 20px;
}

.head-title {
    font-size: 17px;
    font-weight: 550;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}

/* ::v-deep .el-form-item__label {
  text-align: justify;
  text-align-last: justify;
} */
.flex {
    display: flex;
    align-items: center;
}

.jusc {
    justify-content: space-between;
}

.table-choose {
    font-size: 13px;
    color: gray;
    margin-left: 10px;
}


.editUser .el-form-item {
    margin-bottom: 15px;
}

::v-deep .editUser .el-form-item__label {
    margin-left: -10px;
}
</style>